<template>
  <div class="toll-container" v-loading="loading" v-if="types != ''">
    <div class="main-content">
      <!-- 左侧边栏 -->
      <aside class="sidebar">
        <div class="sidebar-tabs">
          <span
            class="tab-btn" 
            :class="{ active: activeTab === 'execute' }"
            @click="activeTab = 'execute'"
            >收费</span
          >
        </div>
        <div style="padding: 10px 10px; height: 100%; width: 100%">
          <div class="search-bar">
            <el-input
              type="text"
              @input="getOrderListData"
              v-model="patientName"
              style="width: 175px; flex: 1; margin-right: 10px"
              placeholder="搜索姓名/电话/身份证号/诊号"
            />
            <!-- <el-select
            v-model="selectedDate"
            placeholder="选择日期"
            class="date-select"
            @change="handleSearch"
            :suffix-icon="CaretBottom"
          >
            <el-option label="今天" value="today" />
            <el-option label="昨天" value="yesterday" />
            <el-option label="明天" value="tomorrow" />
          </el-select> -->
            <div
              @click="CustomDatePickerShow = !CustomDatePickerShow"
              class="register-date-box"
            >
              {{ formattedVisitDate }}
              <el-icon size="14"><CaretBottom /></el-icon>
            </div>
            <div
              class="register-date-custom-picker"
              v-if="CustomDatePickerShow"
            >
              <DatePickerTime
                @change="CustomDatePickerChange"
                @update:modelValue="CustomDatePickerChange"
                :time="visitDate"
              ></DatePickerTime>
            </div>
          </div>

          <div class="patient-list" :style="dispenseList.length > 9?'padding-right: 5px;':''" style="margin-top: 10px;" v-if="dispenseList.length > 0">
              <div class="patient-items">
                <div
                  class="patient-item"
                  v-for="item in dispenseList"
                  :key="item.orderId"
                  :class="{ active: item.orderId === activeOrderId }"
                  @click="onSelectOrder(item)"
                >
                  <div class="patient-info">
                    <img
                      src="@/assets/pharmacy/man.png"
                      style=""
                      class="patient-icon"
                      v-if="item.patientGender === '1'"
                    />

                    <img
                      src="@/assets/pharmacy/woman.png"
                      class="patient-icon"
                      v-if="item.patientGender === '2'"
                    />
                    <img
                      src="@/assets/pharmacy/icon_weizhi_nor.png"
                      class="patient-icon"
                      v-if="item.patientGender === '3'"
                    />

                    <span class="patient-name"
                      >{{ item.patientName }}
                      <!-- <span
                      style="
                        width: 16px;
                        height: 16px;
                        background: #f23c3c;
                        margin-left: 5px;
                        border-radius: 100%;
                        display: inline-block;
                        color: #fff;
                        font-size: 10px;
                        text-align: center;
                        line-height: 16px;
                      "
                      >急</span
                    > -->
                    </span>
                    <span
                      class="tag"
                      :class="item.payStatus == '1' ? 'tag-icon' : ''"
                    >
                      {{ getPayStatusText(item.payStatus) }}</span
                    >
                    <span v-if="item.payStatus == '1'"
                      ><span style="margin: 0 3px">·</span>

                      {{ item?.waitingCount }}</span
                    >
                  </div>

                  <div class="patient-ids">
                    <div class="patient-id">{{ item.visitNo }}</div>
                    <div class="patient-time">
                      {{ dayjs(item.orderTime).format('HH:mm') }}
                    </div>
                  </div>
                </div>
              </div>
          </div>
          <div v-else style="padding: 0px;height: calc(100vh - 225px);;display: flex;justify-content: center; align-items: center;">
            <el-empty :image-size="100"  :image="emptyImage" placeholder="暂无数据" />
          </div>
        </div>
      </aside>

      <!-- 右侧主体内容 -->
      <main class="content-area">
        <!-- 患者信息栏 -->
        <div v-if="dispenseDetail">
          <div class="patient-header">
            <div class="patient-basic">
              <div class="name">
                <!-- <img
                src="@/assets/pharmacy/man.png"
                class="patient-icon"
                v-if="dispenseDetail?.patientGender === '1'"
              />

              <img
                  src="@/assets/pharmacy/woman.png"
                  alt=""
                  class="patient-icon"
                  v-else-if="dispenseDetail?.patientGender == '2'"
                />


              <img  src="@/assets/pharmacy/icon_weizhi_nor.png" class="patient-icon" v-if="dispenseDetail?.patientGender === '3'" />
              />  -->

                <span class="name-text">{{ dispenseDetail?.patientName }}</span>
              </div>
              <span class="gender">{{
                dispenseDetail?.patientGender === '1'
                  ? '男'
                  : dispenseDetail?.patientGender === '2'
                  ? '女'
                  : '未知'
              }}</span>
              <span class="age">
                <span class="age-number">{{ dispenseDetail?.ageYear }} 岁</span>
                <span class="age-month">{{ dispenseDetail?.ageMonth }} 月</span>
              </span>
              <span class="id-number">{{ dispenseDetail?.patientPhone }}</span>
            </div>
            <div class="charge-info">
              <span class="charge-info-item">
                <!-- ￥{{ }} -->
                ￥{{ Number(subtotal / 100).toFixed(2) }}
              </span>

              <el-button
                v-if="
                  dispenseDetail?.payStatus != '3' &&
                  dispenseDetail?.payStatus != '2'
                "
                type="primary"
                v-btnPermission="'btn-toll-money'"
                @click="moneyFun"
              >
                <img
                  src="@/assets/icon/icon_shoufei_nor.png"
                  alt=""
                  style="width: 16px; height: 16px; margin-right: 5px"
                />
                收费</el-button
              >
              <div
                style="
                  width: 52px;
                  height: 32px;
                  border-radius: 4px 4px 4px 4px;
                  border: 1px solid #16ada4;
                  font-weight: 400;
                  font-size: 14px;
                  color: #18b3ab;
                  cursor: pointer;
                  text-align: center;
                  line-height: 32px;
                "
                v-btnPermission="'btn-toll-log'"
                @click="getChargeOrderPrintApi"
              >
                打印
              </div>
              <!--   -->
            </div>
          </div>

          <!-- 收费信息 -->
          <section class="diagnosis-section">
            <!-- <el-table-column
              type="selection"
              
              width="55"
            /> -->
            <el-table
              ref="multipleTableRef"
              :data="dispenseDetail?.itemList"
              row-key="itemId"
              header-cell-class-name="heardClassName"
              @selection-change="handleSelectionChange"
              style="width: 100%"
            >
              <el-table-column v-if="dispenseDetail?.payStatus == '1'"
                type="selection"
                width="55"
                :selectable="checkSelectable"
              />
              <el-table-column
                label="项目组"
                width="180"
                prop="itemRefName"
              ></el-table-column>
              <el-table-column
                label="开单人"
                width="120"
                prop="orderBy"
              ></el-table-column>
              <el-table-column
                label="科室"
                width="120"
                prop="deptName"
              ></el-table-column>
              <el-table-column label="项目名称">
                <template #default="scope">
                  <div
                    v-for="(tag, index) in scope.row.detailList"
                    :key="tag.detailId"
                    :style="
                      index < scope.row.detailList.length - 1
                        ? 'border-bottom: 1px solid #ebeef5;padding:12px 0;'
                        : 'padding:12px 0;'
                    "
                  >
                    {{ tag.detailName }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="单价">
                <template #default="scope">
                  <div
                    v-for="(tag, index) in scope.row.detailList"
                    :key="tag.detailId"
                    :style="
                      index < scope.row.detailList.length - 1
                        ? 'border-bottom: 1px solid #ebeef5;padding:12px 0;'
                        : 'padding:12px 0;'
                    "
                  >
                    {{ (tag.price / 100).toFixed(2) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="数量">
                <template #default="scope">
                  <div
                    v-for="(tag, index) in scope.row.detailList"
                    :key="tag.detailId"
                    :style="
                      index < scope.row.detailList.length - 1
                        ? 'border-bottom: 1px solid #ebeef5;padding:12px 0;'
                        : 'padding:12px 0;'
                    "
                  >
                    {{ tag.totalOutQty }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="单位">
                <template #default="scope">
                  <div
                    v-for="(tag, index) in scope.row.detailList"
                    :key="tag.detailId"
                    :style="
                      index < scope.row.detailList.length - 1
                        ? 'border-bottom: 1px solid #ebeef5;padding:12px 0;'
                        : 'padding:12px 0;'
                    "
                  >
                    {{ tag.totalOutQtyUnitText }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="金额">
                <template #default="scope">
                  <div
                    v-for="(tag, index) in scope.row.detailList"
                    :key="tag.detailId"
                    :style="
                      index < scope.row.detailList.length - 1
                        ? 'border-bottom: 1px solid #ebeef5;padding:12px 0;'
                        : 'padding:12px 0;'
                    "
                  >
                    {{ (tag.subtotal / 100).toFixed(2) }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </section>
        </div>
        <div v-else style="height: 100%;display: flex;justify-content: center; align-items: center;">
          <el-empty :image-size="260" :image="emptyImage"  placeholder="暂无数据" />
        </div>
      </main>

      <!-- 右侧信息栏 -->
      <div style="padding: 13px 0">
        <member-card :patientId="patientId" :patientDetail="dispenseDetail" />
      </div>
    </div>
    <ChargeDialog
      ref="chargeDialogRef"
      v-if="showChargeDialog"
      :visible="showChargeDialog"
      :amount="chargeAmount"
      :patientId="dispenseDetail?.patientId"
      :cashier="chargeCashier"
      :chargeTime="chargeTime"
      @close="showChargeDialog = false"
      @confirm="handleChargeConfirm"
    />

 
    <!-- <BottomDrawer
      :visible="visible"
      
      :width="400"
      :top="'10vh'"
      :showFooter="false"
      @close="onCancel"
    >
      <div style="height:70vh" v-if="visible">
        <div class="printBtn" @click="printBox = true">挂号单</div>
     
      </div>
    </BottomDrawer> -->

     <BottomDrawer
      :visible="visible"
      :title="'打印'"
      :width="350"
      :top="'30vh'"
      :showFooter="false"
      @close="onCancel"
    >
      <div  v-if="visible">
        <div style="display: none;">
            <dom9 ref="dom9Ref" :info="printData"></dom9>
        </div>
        <div class="printBtn" @click="printBox">收费单</div>
      </div>
    </BottomDrawer>
  </div>
  <div v-else style="padding-top: 200px;">
      <el-empty :image-size="260" :image="emptyImage" description="暂无权限" />

  </div>
</template>

<script setup lang="ts">
import { getOrderList, getOrderDetail, doCharge } from '@/api/fee/index';
import emptyImage from '@/assets/icon/internet_empty_illustration.svg';
import type {
  FeeDetail,
  FeeTable,
  FeeTableInfo,
  FeeDetailData,
} from '~/types/fee';
import dom9 from './common/dom9.vue';
import dayjs from 'dayjs';
import { useBaseDataStore } from '@/store/basedata';
import type { DispenseHistory } from '~/types/dispenseHistory';
import MemberCard from './common/memberCard.vue';
import ChargeDialog from '../registered/common/ChargeDialog.vue';
import { CaretBottom } from '@element-plus/icons-vue';

import {
  getChargeOrderPrint,
} from '@/api/print/index';
const userEnums = useBaseDataStore();
const dispenseList = ref<FeeTableInfo[]>([]);
const activeOrderId = ref<number>(-1);
const loading = ref<boolean>(false);
const dispenseDetail = ref<FeeDetailData>();
const dispenseHistoryList = ref<DispenseHistory[]>([]);
const activeCardId = ref<number>(-1);
const patientId = ref<number | null>(null); // 当前选中的患者ID
const patientDetail = ref<any | undefined>(undefined); // 当前选中的患者详情
const CustomDatePickerShow = ref(false);
const dom9Ref = ref();
const subtotal = ref(0);


import stores from '@/store';
const route = useRoute();
let menuList = ref<any>(
  await stores.useBaseDataStore().findMenuList(route.query.menuId)
);

menuList.value = menuList.value.filter((item:any) => {
  return item.menuType == 2;
})
const types = ref<any>();
//console.log(menuList.value);

if(menuList.value.length > 0){
  types.value = menuList.value[0].perms;
}else{
  types.value = '';
}

//打印逻辑
const printData = ref<any>({});
const visible = ref(false);
const printBox =  () => {
    dom9Ref.value?.open()
};
const onCancel = () => {
  visible.value = false;
};
const getChargeOrderPrintApi = async () => { 
    let res = await getChargeOrderPrint(dispenseDetail.value?.orderId);
    if(res.code == '200'){
      printData.value = res.data;
      visible.value = true;
      // nextTick(async() => {
      //     dom9Ref.value.open(res.data)
      // });
    }else{
      //ElMessage.error(res.msg)
    }
};




// tab切换
const activeTab = ref<'execute' | 'send'>('execute');

// 完成收费逻辑
const patientName = ref<string>('');
const showChargeDialog = ref(false);
const chargeAmount = ref<any>('');
const chargeCashier = ref('');
const chargeTime = ref('');
const handleChargeConfirm = async (form: any) => {
  let itemIdList: any = [];
  // selectionList.value.forEach((item) => {
  //   item.detailList.forEach((tag: any) => {
  //     itemIdList.push(tag.itemId);
  //   });
  // });

  multipleSelection.value.forEach((item: any) => {
    itemIdList.push(item.itemId);
  });


  let data = {
    ...form.data,
    itemIdList: itemIdList,
    orderId: dispenseDetail.value?.orderId,
  };
  let res = await doCharge(data);
  if (res.code == '200') {
    ElMessage.success('收费成功');
    showChargeDialog.value = false;
    chargeAmount.value = '';
    getOrderListData();
  } else {
    //ElMessage.error(res.msg);
  }
};
const CustomDatePickerChange = (date: any) => {
  // 为空直接关闭
  if (!date) {
    CustomDatePickerShow.value = false;
    return;
  }

  // 规范化为 YYYY-MM-DD 字符串
  const next = dayjs(date).isValid()
    ? dayjs(date).format('YYYY-MM-DD')
    : String(date);
  visitDate.value = next;

  patientId.value = null;
  dispenseDetail.value = undefined;
  CustomDatePickerShow.value = false;
  getOrderListData();
};
const moneyFun = () => {
  if (multipleSelection.value.length == 0) {
    ElMessage.warning('请选择要收费的订单');
    return;
  }
  chargeAmount.value = subtotal.value;
  chargeCashier.value = getUserInfo().empName;
  chargeTime.value = dayjs().format('YYYY-MM-DD HH:mm');
  showChargeDialog.value = true;
};

//执行类型
const getPayStatusText = (payStatus: string) => {
  return userEnums
    .getEnumSelect('payStatusEnum')
    ?.find((target: any) => target.value?.toString() === payStatus?.toString())
    ?.text;
};

const selectionList = ref<any[]>([]);

//选择框禁用
const checkSelectable = (row: any) => {
  return (row.payStatus == '2' || row.payStatus == '3') ? false : true;
};
const dataSource = ref<any[]>([]);
//选择时间
const selectedDate = ref('today');
const today = () => {
  const date = new Date();
  return date.toISOString().split('T')[0]; // YYYY-MM-DD格式
};

const tomorrow = () => {
  const date = new Date();
  date.setDate(date.getDate() + 1);
  return date.toISOString().split('T')[0];
};

const yesterday = () => {
  const date = new Date();
  date.setDate(date.getDate() - 1);
  return date.toISOString().split('T')[0];
};
const visitDate = ref<any>(today());

// 日期显示：若为今天显示“今天”，否则显示 MM-DD
const formattedVisitDate = computed(() => {
  const val = visitDate.value;
  if (!val) return '';
  const current = dayjs();
  const target = dayjs(val);
  if (!target.isValid()) return '';
  return target.isSame(current, 'day') ? '今天' : target.format('MM-DD');
});

const handleSearch = () => {
  //console.log(selectedDate.value);

  if (selectedDate.value == 'today') {
    visitDate.value = today();
  } else if (selectedDate.value == 'tomorrow') {
    visitDate.value = tomorrow();
  } else if (selectedDate.value == 'yesterday') {
    visitDate.value = yesterday();
  }
  //console.log(visitDate.value);
};

const getOrderListData = async () => {
  dispenseDetail.value = undefined; 

  const res = await getOrderList({
    patientName: patientName.value,
    visitDate: visitDate.value,
    pageNo: 1,
    pageSize: 999999,
  });

  if (res.code == '200') {
    dispenseList.value = res.data || [];
    if (dispenseList.value.length > 0) {
      onSelectOrder(dispenseList.value[0]!);
    }
  } else {

  }
};

import type { TableInstance } from 'element-plus';
const multipleTableRef = ref<TableInstance>();
const getOrderDetailData = async (orderId: any) => {
  try {
    if (loading.value) {
      return;
    }

    loading.value = true;
    subtotal.value = 0;
    const res = await getOrderDetail(orderId);
    if (res.code == '200') {
      dispenseDetail.value = res.data;

      nextTick(() => {
         if (dispenseDetail.value && dispenseDetail.value.itemList.length > 0) {
          for (let i = 0; i < dispenseDetail.value.itemList.length; i++) {
            let item: any = dispenseDetail.value.itemList[i];
            if (item.payStatus == '1') {
              subtotal.value += item.subtotal;
                multipleTableRef.value!.toggleRowSelection(
                  item,
                  undefined
                )
            }
          }
        }
      });
    } else {

    }
      loading.value = false;

  } catch (error) {
      loading.value = false;
    //console.log(error);
  } finally {
      loading.value = false;
  }
};
// 多选
const multipleSelection = ref<any>([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
  subtotal.value = 0;
  for (let index = 0; index < val.length; index++) {
    const element = val[index];

    subtotal.value += element.subtotal;
  }


  
  
};
// const getDispenseHistoryListApi = async (patientId: number) => {
//   const res = await getDispenseHistoryList({
//     patientId,
//     pageNo: 1,
//     pageSize: 10000,
//   });

//   if (res.code == '200') {
//     dispenseHistoryList.value = res.data || [];
//   } else {
//     ElMessage({
//       type: 'warning',
//       message: res.msg,
//     });
//   }
// };

const onSelectOrder = (item: any) => {
  activeOrderId.value = item.orderId;
  getOrderDetailData(item.orderId);
  // getDispenseHistoryListApi(item.patientId);
};

const onExpandCard = (orderId: number) => {
  if (activeCardId.value === orderId) {
    activeCardId.value = -1;
  } else {
    activeCardId.value = orderId;
  }
};

onMounted(() => {
  visitDate.value = dayjs().format('YYYY-MM-DD');

  getOrderListData();
});
</script>
<style>
.toll-container .el-table__row .el-table__cell {
  padding: 0px !important;
  margin: 12px 0;
}
</style>
<style lang="scss" scoped>
.tag-icon {
  position: relative;
  color: #000 !important;
}
.printBtn{
    width: 296px;
    cursor: pointer;
    line-height: 46px;
    background: rgba(220,220,220,0.1);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #EBEBEB;
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    color: #16ADA4;
  }
  .printBtn:hover{
    border: 1px solid rgba(22, 173, 164, 0.48);
    background: rgba(22, 173, 164, 0.08);
  }
.toll-container {
  width: 100%;
  height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #f0f2f5;
  padding-right: 14px;

  // 主内容区
  .main-content {
    flex: 1;
    display: flex;
    overflow: hidden;

    // 左侧边栏
    .sidebar {
      width: 280px;
      height: 100%;
      background: white;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

      .sidebar-tabs {
        flex-shrink: 0;
        display: flex;
        gap: 24px;
        height: 52px;
        padding-left: 22px;
        border: 1px solid #e7e7e7;

        .tab-btn {
          cursor: pointer;
          font-weight: 400;
          font-size: 18px;
          color: rgba(0, 0, 0, 0.4);
          line-height: 52px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          position: relative;

          &.active {
            font-weight: 400;
                  font-size: 18px;

            color: #18b3ab;
            text-align: left;
            font-style: normal;
            text-transform: none;
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 3px;
              background: #18b3ab;
            }
          }
        }
      }

      .search-bar {
        flex-shrink: 0;
        align-items: center;
        display: flex;
        gap: 2px;
        position: relative;
        input {
          width: 182px;
          height: 32px;
          padding: 0px 8px;
          background: #ffffff;
          border-radius: 3px 3px 3px 3px;
          border: 1px solid #dcdcdc;
          font-weight: 400;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.9);

          &::placeholder {
            font-weight: 400;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.2);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }

        .search-btn {
          display: flex;
          align-items: center;
          gap: 6px;
          height: 32px;
          margin-left: auto;
          cursor: pointer;

          .search-btn-text {
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.6);
            line-height: 32px;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }

          .search-btn-icon {
            width: 17px;
            height: 16px;
          }
        }
      }

      .patient-list {
        flex: 1;
        width: 100%;
        height: calc(100% - 52px - 52px);
        overflow-y: auto;
        
        .patient-items {
          display: flex;
          flex-direction: column;
          gap: 5px;

          padding-bottom: 10px;
        }

        .patient-item {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          gap: 5px;
          height: 72px;
          padding: 0px 12px;
          cursor: pointer;
          transition: background 0.2s;
          border: 1px solid transparent;

          &:hover,
          &.active {
            background: rgba(24, 179, 171, 0.1);
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #16ada4;
            color: #16ada4 !important;
            span {
              color: #18b3ab !important;
            }
          }

          .patient-info {
            display: flex;
            align-items: center;
            width: 100%;

            .patient-icon {
              width: 16px;
              height: 16px;
              font-size: 16px;
            }

            .patient-name {
              padding-left: 5px;
              font-weight: 400;
              font-size: 15px;
              color: rgba(0, 0, 0, 0.9);
              line-height: 22px;
              text-align: left;
              font-style: normal;
              text-transform: none;
              display: flex;
              align-items: center;
            }

            .tag {
              margin-left: auto;
              font-weight: 400;
              position: relative;
              font-size: 14px;
              color: rgba(0, 0, 0, 0.4);
              line-height: 22px;
              text-align: right;
              font-style: normal;
              text-transform: none;
            }
          }

          .patient-ids {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 21px;
            width: 100%;

            .patient-id {
              font-weight: 400;
              font-size: 13px;
              color: rgba(0, 0, 0, 0.4);
              line-height: 22px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }

            .patient-time {
              font-weight: 400;
              font-size: 13px;
              color: rgba(0, 0, 0, 0.4);
              line-height: 22px;
              text-align: right;
              font-style: normal;
              text-transform: none;
            }
          }
        }
      }
    }

    // 右侧主体内容
    .content-area {
      flex: 1;
      padding: 12px 17px;
      overflow-y: auto;
      position: relative;

      // 患者信息栏
      .patient-header {
        border-radius: 6px;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .patient-basic {
          display: flex;
          align-items: center;
          height: 40px;
          padding: 0x 12px;
          background: white;
          border-radius: 6px 6px 6px 6px;

          .name {
            display: flex;
            align-items: center;
            gap: 3px;
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.9);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-right: 1px dashed #dcdcdc;

            .patient-icon {
              width: 16px;
              height: 16px;
            }
          }

          .gender {
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.9);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-right: 1px dashed #dcdcdc;
          }

          .id-number {
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.6);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }

          .age {
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.6);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-right: 1px dashed #dcdcdc;

            .age-number {
              padding-right: 12px;
            }
          }

          .weight {
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.6);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-right: 1px dashed #dcdcdc;
          }

          .visit-id {
            padding: 0px 12px;
            font-weight: 400;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.6);
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }

        .action-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 52px;
          height: 32px;
          background: #16ada4;
          border-radius: 4px 4px 4px 4px;
          font-weight: 400;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.9);
          line-height: 22px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }

      // 诊断信息
      .diagnosis-section {
        width: 100%;
        margin-bottom: 12px;
        border-radius: 12px 12px 12px 12px;
        background: #ffffff;
        border-radius: 12px;
        overflow: hidden;
      }
    }
  }
}
.charge-info {
  display: flex;
  align-items: center;
  gap: 12px;
  .charge-info-item {
    font-weight: 400;
    font-size: 16px;
    color: #e37318;
  }
}
.register-date-box {
  cursor: pointer;
  text-align: right;
}
.register-date-custom-picker {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2000;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 8px 8px 4px;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
</style>
